<template>
	<div class="manager-container">
		<div class="app-container">
			<h4 class="form-header h4">基本信息</h4>
			<el-form ref="form" :model="form" label-width="80px">
				<el-row>
					<el-col :span="8" :offset="2">
						<el-form-item label="用户昵称" prop="nickName">
							<el-input v-model="form.nickName" disabled />
						</el-form-item>
					</el-col>
					<el-col :span="8" :offset="2">
						<el-form-item label="登录账号" prop="userName">
							<el-input v-model="form.userName" disabled />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<h4 class="form-header h4">角色信息</h4>
			<el-table :header-cell-style="{background:'#fafafa'}" :border="true" :row-key="getRowKey" @row-click="clickRow" ref="table" @selection-change="handleSelectionChange"
				:data="roles.slice((pageNum-1)*pageSize,pageNum*pageSize)" v-loading="loading">
				<el-table-column label="序号" type="index" align="center" width="80">
					<template #default="scope">
						<span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
					</template>
				</el-table-column>
				<el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
				<el-table-column label="角色编号" align="center" prop="roleId" />
				<el-table-column label="角色名称" align="center" prop="roleName" />
				<el-table-column label="权限字符" align="center" prop="roleKey" />
				<el-table-column label="创建时间" align="center" prop="createTime" width="180">
					<template #default="scope">
						<span>{{ scope.row.createTime }}</span>
					</template>
				</el-table-column>
			</el-table>

			<pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />

			<el-form label-width="100px">
				<el-form-item style="text-align: center;margin-left:30%;margin-top:30px;">
					<el-button type="primary" @click="submitForm()">提交</el-button>
					<el-button @click="close()">返回</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	import {
		getAuthRole,
		updateAuthRole
	} from "@/api/system/user";

	export default {
		name: "AuthRole",
		data() {
			return {
				// 遮罩层
				loading: true,
				// 分页信息
				total: 0,
				pageNum: 1,
				pageSize: 10,
				// 选中角色编号
				roleIds: [],
				// 角色信息
				roles: [],
				// 用户信息
				form: {}
			};
		},
		created() {
			const userId = this.$route.params && this.$route.params.userId;
			console.log(userId, "用户ID");

			if (userId) {
				this.loading = true;
				getAuthRole(userId).then((response) => {
					this.form = response.user;
					this.roles = response.roles;
					this.total = this.roles.length;
					this.$nextTick(() => {
						this.roles.forEach((row) => {
							if (row.flag) {
								this.$refs.table.toggleRowSelection(row);
							}
						});
					});
					this.loading = false;
				});
			}
		},
		methods: {
			/** 单击选中行数据 */
			clickRow(row) {
				this.$refs.table.toggleRowSelection(row);
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.roleIds = selection.map((item) => item.roleId);
			},
			// 保存选中的数据编号
			getRowKey(row) {
				return row.roleId;
			},
			/** 提交按钮 */
			submitForm() {
				const userId = this.form.userId;
				const roleIds = this.roleIds.join(",");
				updateAuthRole({
					userId: userId,
					roleIds: roleIds
				}).then((response) => {
					this.$message.success("授权成功");
					this.close();
				});
			},
			/** 关闭按钮 */
			close() {
				const obj = {
					path: "/sysUser"
				};
				// this.$tab.closeOpenPage(obj);
				this.$router.push(obj)
			},
		},
	};
</script>
